<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单练习</title>
    <!-- 引入外部第三放css文件 ,rel固定值：样式表，href链接地址，.min意思最小文件，压缩-->
    <link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
    <!-- container 容器 -->
    <div class="container">
        <h3>学生信息管理系统mis</h3>
        <div class="form-group">
            <!-- label标签for的属性光标定位  for属性值为id的值-->
            <label for="name">
                姓名:
                <!-- 文本输入框  placeholder 提示  id是为了给后台辨别 value为默认-->
                <input type="text" name="name" id="name" placeholder="请输入姓名.." class="form-control">
                
            </label>
        </div>
        <div class="form-group">
            <label for="age" >年龄:</label>
            <!-- 数字框 -->
            <input type="number" name="age" id="age" placeholder="请输入年龄.." class="form-control">
        </div>
        <div class="form-group">
            <label for="sex">性别:</label>
            <!--同名只能选择一个 单选按钮   -->
            <div class="radio-inline">
                <input  type="radio" name="sex" id="sex" checked="checked">男
            </div>
            <div class="radio-inline">
                <input type="radio" name="sex" id="sex">女
            </div>
        </div>
        <div class="form-group">
            <!-- 多选按钮 -->
            <label for="hobby">爱好:</label>
            <!-- 复选按钮 -->
            <div class="checkbox-inline">
                <input type="checkbox" name="hobby" id="hobby">乒乓球

            </div>
            <div class="checkbox-inline">
                <input type="checkbox" name="hobby" id="hobby">爬山

            </div>
            <div class="checkbox-inline">
                <input type="checkbox" name="hobby" id="hobby">唱歌

            </div>
        </div>
        <div class="form-group">
            <!--下拉框 -->
            <label for="edu">学历:</label>
            <!-- 单选，选择幼儿园，表单提交1，性能高 -->
            <select name="edu" id="edu">
                <option value="1">幼儿园</option>
                <option value="2">小学</option>
                <option value="3">初中</option>
                <option value="4">高中</option>
                <option value="5">大专</option>
                <option value="6">本科</option>
                <option value="7">研究生</option>
                <option value="8">博士</option>
            </select>
        </div>
        <div class="form-group">
            <!-- class属性支持多个样式 -->
            <input class="btn btn-primary" type="button" name="save" value="保存">
            <button class="btn btn-danger" name="clear">取消</button>

        </div>
    </div>
</body>
</html>